<template>
  <div class="home">
    <div class="side left">
      <sideBox boxTitle="产量统计" class="output">
        <product :data="productData" />
      </sideBox>
      <sideBox boxTitle="生产信息" class="prod-info">
        <prodinfo />
      </sideBox>
      <sideBox boxTitle="环境参数" class="envir">
        <envirmentParams />
      </sideBox>
      <sideBox boxTitle="设备状态" class="status">
        <equipStatus :data="statusData" />
      </sideBox>
    </div>
    <div class="center">
      <equip />
    </div>
    <div class="side right">
      <sideBox boxTitle="OEE" class="s-oee">
        <oee :data="oeeData" />
      </sideBox>
      <sideBox boxTitle="CT" class="s-ct">
        <ct :data="ctData" />
      </sideBox>
      <sideBox boxTitle="报警信息" class="s-alarm">
        <alarmLog :data="alarmData" />
      </sideBox>
    </div>
  </div>
  <sysControl />
</template>
<script setup>
import { ref, reactive } from "vue";
import sideBox from "./component/side-box.vue";
import product from "./component/product.vue";
import ct from "./component/ct.vue";
import oee from "./component/oee.vue";
import sysControl from "./component/sysControl.vue";
import alarmLog from "./component/alarmLog.vue";
import envirmentParams from "./component/envirmentParams.vue";
import equipStatus from "./component/equipStatus.vue";
import prodinfo from "./component/prodinfo.vue";
import equip from "./component/equip.vue";

let oeeData = reactive({
  composite: 10,
  performance: 20,
  quality: 30,
  availability: 40, //可用
});
let ctData = reactive({
  ydata: ["工位1", "工位2", "工位3", "工位4"],
  sdata: [10, 15, 13, 14],
});
let productData = reactive({
  xdata: [],
  sdata: [],
});
let statusData = {
  equip: "停机",
  equips: {
    CCD1: 1,
    PLC: 0,
    打印机: 1,
  },
};
let alarmData = [
  {
    creationTime: new Date(),
    moduleName: "模组一",
    message: "报警内容",
  },
];
</script>
<style scoped lang="scss">
.home {
  width: 100%;
  height: 100%;
  display: flex;
  padding: 0 15px;
  .side {
    height: calc(100vh - 50px);
    padding: 5px 0;
    width: 24%;
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.25);
    .output {
      height: 30%;
      margin-bottom: 8px;
    }
    .prod-info {
      height: 28%;
      margin-bottom: 8px;
    }
    .envir {
      height: 18%;
      margin-bottom: 8px;
    }
    .status {
      height: 24%;
    }
    .s-oee {
      height: 33%;
    }
    .s-ct {
      height: 33%;
      margin: 10px 0;
    }
    .s-alarm {
      height: 33%;
    }
  }
  .center {
    padding: 5px;
    flex: 1;
    display: flex;
    align-items: center;
  }
}
</style>
